<template>
  <div class="news">
    <head-cont></head-cont>
    <div class="banner"></div>
    <section class="news-wrap" v-if="!id">
      <div class="news-item" @click="goToInfo(1)">
        <div class="date fl">
          <span class="title">26</span>
          <span>2018/04</span>
        </div>
        <div class="news-info fl">
          <h6>与羽戈科技合作你想好了么？</h6>
          <div class="text">
            羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
            或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
            羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
            或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
          </div>
        </div>
      </div>
    </section>
    <section class="news-item-info" v-else>
      <header>
        <p>
          <span>当前位置：</span>
          <router-link tag="span" to="/">首页</router-link>>
          <router-link tag="span" to="/news">新闻中心</router-link>
        </p>
      </header>
      <div class="news-item-main pos-rel">
        <h2>与羽戈科技合作你想好了么？</h2>
        <div class="news-about clearfix">
          <div class="date fl">
            <span class="pos-rel">发布时间：2018/04/26 14:57</span>
          </div>
          <div class="watcher fr">
            <span class="pos-rel">浏览：111次</span>
          </div>
        </div>
        <div class="news-content">
            羽戈科技是世界上第一家将人工智能姿态矫正+大数据应用于智慧体育的企业，在与传统体育培训公司的长期合作中，不断深挖体育培训公司的市场痛点，在此基础上，开发出了一整套解决这些痛点的智能解决方案，为用户创造出了更加便捷，更加高效的学习体验。
          人工智能行业的发展历程中，不断有人将原来存在于实验室中的算法应用于商业中，姿态矫正算法作为2017年才刚刚公开代码的算法，羽戈科技明锐地发现了这一算法模型是可以应用于体育培训行业中，并第一个将这一算法实现在了交互界面应用中，这一应用可以移植到任何界面中，真正实现端到端的无界跨越。
          羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的，或者是
          羽戈科技团队的主要成员都是来自于北京理工大学，秉持德以明理，学以精工的校训，与大多数校友投身国防不同，我们选择的是投身创业，实业兴邦。我们不一样，选择的不一样，但我们又一样，报效祖国，砥砺前行，为实现中国制造2025贡献自己的绵薄之力。
          羽戈科技致力于通过相对平民化的价钱去设计产品，通过薄利多销的模式进行推广产品。同时，为了尽快打开市场，羽戈科技利用松山湖机器人产业基地的产业链将会提供更加优惠的产品以及更加优厚的售后服务。
        </div>
        <div class="prev">
          &lt;&lt;上一篇
        </div>
        <div class="next">
          下一篇&gt;&gt;
        </div>
      </div>
    </section>
    <foot-cont></foot-cont>
  </div>
</template>
<script>
import headCont from '@/components/header'
import footCont from '@/components/footer/foot2'
export default {
  data(){
    return{
      id:this.$route.query.id,
    }
  },
  watch:{
    $route(){
      this.id = this.$route.query.id;
      this.initTopPos();
    }
  },
  components:{
    headCont,
    footCont
  },
  methods:{
    goToInfo(id){
      this.$router.push({path:'/news',query:{id}})
    },
    initTopPos(){
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  },
  mounted(){
    this.initTopPos()
  }
}
</script>
<style scoped>
  .banner{
    height:550px;
    min-width:1200px;
    background: url('../../assets/image/icon3/1.png') no-repeat center center;
  }
  .news-wrap{
    width:1200px;
    min-height:250px;
    margin: 0 auto;
    padding:45px 0;
    box-sizing: border-box;
  }
  .news-item{
    height:180px;
    margin-bottom: 14px;
    cursor: pointer;
    background: url('../../assets/image/icon3/2.png') no-repeat 1095px 55px;
    background-color: #fcfcfc;
  }
  .news-item .date{
    width:120px;
    height:180px;
    color:#fff;
    padding-top:44px;
    margin-right:44px;
    box-sizing: border-box;
    background-color: #627190;
  }
  .news-item .date span{
    display: block;
    text-align: center;
    font-size: 24px;
  }
  .news-item .date .title{
    font-size: 48px;
  }
  .news-info{
    padding:40px 0;
    box-sizing: border-box;
  }
  .news-info .text{
    width:916px;
    font-size: 14px;
    color:#999;
    text-indent: 20px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
  }
  .news-info .text::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 40px;
    background:url('http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png') repeat-y;
  }
  .news-info h6{
    font-size: 24px;
    line-height: 40px;
    color:#757575;
  }
  .news-item-info{
    min-height:792px;
  }
  .news-item-info header{
    height:40px;
    font-size: 14px;
    line-height: 40px;
    color:#666;
    background-color: #e5e5e5;
  }
  .news-item-info header span{
    cursor: pointer;
  }
  .news-item-info header p,.news-item-main{
    width:1200px;
    margin:0 auto;
  }
  .news-item-main{
    padding:34px 68px;
    min-height:750px;
    box-sizing: border-box;
  }
  .news-item-main h2{
    text-align: center;
    font-size: 24px;
    line-height: 40px;
    color:#666;
  }
  .news-about{
    width:510px;
    font-size: 14px;
    line-height: 30px;
    color:#666;
    margin:0 auto;
  }
  .news-about .date{
    width:240px;
    height:30px;
  }
  .news-about .watcher{
    width:210px;
    height:30px;
    text-align: center;
  }
  .news-about .date span::before{
    content: url('../../assets/image/icon4/1.png');
  }
  .news-about .watcher span::before{
    content: url('../../assets/image/icon4/2.png');
  }
  .news-about .date span::before,.news-about .watcher span::before{
    display: block;
    position: absolute;
    top:-2px;
    left:0;
  }
  .news-about .date span,.news-about .watcher span{
    padding-left:20px;
  }
  .news-content{
    width:1060px;
    margin:0 auto;
    font-size: 14px;
    line-height: 24px;
    color:#666;
    margin-top:10px;
  }
  .prev,.next{
    cursor: pointer;
    position: absolute;
    bottom:5px;
    font-size: 18px;
    color:#747474;
  }
  .prev{
    left:0;
  }
  .next{
    right:0;
  }
</style>
